// 定义路由规则
import React, { Component, lazy, Suspense } from 'react';
import { Route, Redirect, Switch } from 'react-router-dom';
// 以路由懒加载的方式引入组件
// lazy 该方法函数 用来以懒加载的方式引入组件
// Suspense 该组件用来应用对应的组件,并且 可以给应用的组件设置loading动画效果
// Suspense 用法 包裹对应要应用的组件, 有一个属性 fallBack = {loading}
import Loading from '@/components/Loading'
const Login = lazy(() => import('@/views/login/Login'));
const Dashboard = lazy(() => import('@/views/dashboard/Dashboard'));

class Index extends Component {
    render() {
        return (
            <Suspense fallback={<Loading></Loading>}>
                <Switch>
                    <Route path='/login' component={Login}></Route>
                    <Route path='/dashboard' component={Dashboard}></Route>
                    <Redirect from='/' to='/login' exact></Redirect>
                </Switch>
            </Suspense>
        );
    }
}

export default Index;
